<template>
  <div class="qopSon mianyuContent" >
  	<div class="word_box wordMianyu">
		  	<div class=" word_gj clear_float">
                <div :class="this.type=='p'?'jqueryUI_active':''" class="jqueryUI jqueryUI1 " id="province" @click="changePublic('p')">县面雨量</div>
                <div :class="this.type=='s'?'jqueryUI_active':''" class="jqueryUI" id="stationA"  @click="changePublic('s')">站点</div>

			  	<div>复制信息</div>
			  	<div>详情</div>
			</div>
            <div class="mianyu_toll clear_float">
                <div v-show="type=='s'">
                    <select name="" id="" @change="changeType(provinceId)" v-model="provinceId">
                        <option :value="index" v-for="(item , index) of json" :key="index">{{item.StationName}} ( {{item.stationId}} )</option>
                    </select>
                </div>
                <div class="toll" :class="this.number==24?'active_toll':''" @click="changeTime(24)">
                    <span class="check_box"></span>
                    <span>近24小时</span>
                </div>
                <div class="toll" :class="this.number==12?'active_toll':''" @click="changeTime(12)">
                    <span class="check_box"></span>
                    <span>近12小时</span>
                </div>

            </div>
            <div class="word_text ">
                {{word}}
            </div>

	  </div>
	<div id="echart_boxMianyu" class="echart_boxMianyu echart_box_all">

	</div>
  </div>
</template>

<script>
import topTitle from './top'
import echarts from 'echarts'
//import json from "../../assets/json/RainBysTationInfo.json"
export default {
    props:["msg"],
	components: {
        topTitle,
    },
	data() {
		return {
			title:{
				name: "面/站点雨量逐小时信息",
				time: "2018-10-22 16:13",
			},
            word:"",
            number:12,
            type:"p",
            provinceId:0,
            json:"",
		}
	},
	methods:{
        refreshAll(){

		},
		changeType(provinceId){
            // //console.log(provinceId);
            this.getStation();
        },
        closeThis(){
            this.$emit('closep',this.msg.name)
        },
        changeTime(num){
            this.number=num;
            this.publicGet();
        },
        changePublic(type){
            this.type=type;
            if(type=="p"){
                this.publicGet=this.getProvince;
            }else{
                this.publicGet=this.getStation;
            };
            this.publicGet();
        },
        publicGet(){

        },
        getProvince(){
            this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/FaceRainFallByContry?code=330600000000&type=1&number="+this.number,}).then((res)=>{
                var _data=res.data.DS;
                this.title.time=_data.time;
                this.word=_data.word;
                // //console.log(_data)
                setTimeout(()=>{
                    this.doEchart(_data.hour);
                },1000)
            })
            .catch(function(err){
                //console.log(err)
            })
        },
        getStation(){
            this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/FaceRainFallByStation?code="+this.json[this.provinceId].stationId+"&type=1&number="+this.number,}).then((res)=>{
                var _data=res.data.DS;
                this.title.time=_data.time;
                this.word=_data.word;
                // //console.log(_data)
                setTimeout(()=>{
                    this.doEchart(_data.hour);
                },1000)
            })
            .catch(function(err){
                //console.log(err)
            })
        },
		doEchart(data){
			// //console.log($(".qop").height(),$(".indexComTop").height(),$(".progress_box").height(),$(".word_box").height())
			var height=$(".qop").height()-$(".indexComTop").height()-$(".wordMianyu").height()-27;
            $(".echart_boxMianyu").css("height",height);
            //console.log($(".qop").height(),$(".indexComTop").height(),$(".wordMianyu").height())
            //console.log(height)
            var xis=[];
            var yis=[];
            for(var i=0;i<data.length;i++){
                var time=data[i].ObservTimes.slice(6,8)+"时";
                xis.push(time);
                yis.push(data[i].Precipitation);
            }
            this.charts = echarts.init(document.getElementById("echart_boxMianyu"))

			this.charts.setOption({
				color: ['#3398DB'],
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : xis,
						axisTick: {
							alignWithLabel: true
						},
						axisLine:{
						lineStyle: {
							color: '#333'
						}
					}
					}
				],
				yAxis : [
					{
						type : 'value',
						axisLine:{
						lineStyle: {
							color: '#333'
						}
					}
					},
				],
				series : [
					{
						name:'面雨量',
						type:'bar',
						barWidth: '60%',
						data:yis,
					}
				]
            })
            // //console.log(this.echarts)
		}

    },
	mounted(){
		this.$emit('refreshTop',this.title);
        this.publicGet=this.getProvince;
        this.publicGet();
        this.json=json.DS.R;
        // //console.log(this.json)
	}
}
</script>

<style lang="less">
.mianyuContent{

	.word_box{
		font-size: 12px;
		padding: 15px 10px 0 0;
		.word_gj{
			text-align: right;
            margin: 0 0 12px 0;
            padding-bottom: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
			div{
                padding: 5px;
				color: #3E8FE3;
                margin-right: 12px;
                float: right;
				cursor: pointer;
				&:hover{
					text-decoration: underline;
				}
            }
            .jqueryUI{
                float: left;
                text-align: center;
                display: inline-block;
                padding: 5px;
            }
            .jqueryUI1{
                margin-left: 10px;
            }
            .jqueryUI_active{
                border: 1px solid rgba(255, 255, 255, 0.4);
                border-bottom: transparent;
            }
        }
        .mianyu_toll{
            padding: 10px 0;
            select{
                font-size: 12px;
            }
            &>div{
                float: left;
                margin:0 10px;
                cursor: pointer;
            }
            .toll{
                float: right;
            }
            .active_toll{
                color: #89dbf5;
                .check_box{
                    background: #89dbf5;
                }
            }
        }
    }
    .check_box{
        display: inline-block;
        width: 8px;
        height: 8px;
        border: 1px solid #89dbf5;
    }
}
</style>
